<template>
    <div class="toolbox-tab-box">
        <div class="toolbox-4-1-c">
            <div class="tabs-card-edit-box">
                <a-tabs type="card" v-model:activeKey="activeKey" @change="activeChange">
                    <a-tab-pane key="标签页1" tab="标签页1"></a-tab-pane>
                    <a-tab-pane key="标签页2" tab="标签页2"></a-tab-pane>
                    <a-tab-pane key="标签页3" tab="标签页3"></a-tab-pane>
                    <a-tab-pane key="标签页4" tab="标签页4"></a-tab-pane>
                    <a-tab-pane key="标签页4" tab="标签页4"></a-tab-pane>
                </a-tabs>
            </div>
            <div class="tab-box-v1">
                <div class="triangle"></div>
            </div>
        </div>
        <!-- <div class="toolbox-4-1-c">
            <div class="tabs-card-edit-box tabs-card-edit-box2">
                <a-tabs type="card" v-model:activeKey="activeKey" @change="activeChange">
                    <a-tab-pane key="标签页1" tab="标签页1"></a-tab-pane>
                    <a-tab-pane key="标签页2" tab="标签页2"></a-tab-pane>
                    <a-tab-pane key="标签页3" tab="标签页3"></a-tab-pane>
                    <a-tab-pane key="标签页4" tab="标签页4"></a-tab-pane>
                    <a-tab-pane key="标签页4" tab="标签页4"></a-tab-pane>
                </a-tabs>
            </div>
            <div class="tab-box-v1">

            </div>
        </div>
        <div class="toolbox-4-1-c">
            <div class="tabs-card-edit-box tabs-card-edit-box3">
                <a-tabs type="card" v-model:activeKey="activeKey" @change="activeChange">
                    <a-tab-pane key="标签页1" tab="标签页1"></a-tab-pane>
                    <a-tab-pane key="标签页2" tab="标签页2"></a-tab-pane>
                    <a-tab-pane key="标签页3" tab="标签页3"></a-tab-pane>
                    <a-tab-pane key="标签页4" tab="标签页4"></a-tab-pane>
                    <a-tab-pane key="标签页4" tab="标签页4"></a-tab-pane>
                </a-tabs>
            </div>
            <div class="tab-box-v1">

            </div>
        </div>
        <div class="toolbox-4-1-c">
            <div class="tabs-card-edit-box tabs-card-edit-box4">
                <a-tabs type="card" v-model:activeKey="activeKey" @change="activeChange">
                    <a-tab-pane key="标签页1" tab="标签页1"></a-tab-pane>
                    <a-tab-pane key="标签页2" tab="标签页2"></a-tab-pane>
                    <a-tab-pane key="标签页3" tab="标签页3"></a-tab-pane>
                    <a-tab-pane key="标签页4" tab="标签页4"></a-tab-pane>
                    <a-tab-pane key="标签页4" tab="标签页4"></a-tab-pane>
                </a-tabs>
            </div>
            <div class="tab-box-v1">

            </div>
        </div> -->
    </div>
</template>
<script>
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            activeKey:'标签页1'
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{

    }
}
</script>
<style lang="less">
.toolbox-tab-box{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .toolbox-4-1-c{
        width: 50%;
        height: 50%;
    }
    .tabs-card-edit-box{
        margin: 10px 10px 0 10px;
        .ant-tabs-bar{
            // border: 0 !important;
            border-color: #38f !important;
            margin: 0 !important;
        }
        .ant-tabs-tab{
            background: #edeff3 !important;
            font-size: 14px !important;
            margin-left: 1px !important;
            height: 30px !important;
            line-height: 30px !important;
            
        }
        .ant-tabs-tab-active{
            margin: 0 !important;
            margin-left: -6px !important;
            margin-right: -4px !important;
            background-color: #38f !important;
            color: #fff !important;
            height: 32px !important;
            border: 1px solid #38f !important;
            border-bottom: 0 !important;
            padding:0 15px !important;
            -webkit-mask-image: url(''),
				url(''),
				url("../../assets/tab-z.png");
			-webkit-mask-size: 6px 9px, 7px 9px, calc(100% - 12px) calc(100% + 18px);
			-webkit-mask-position: right bottom, left bottom, center top;
			-webkit-mask-repeat: no-repeat;
            
        }
        .ant-tabs-nav-container{
            height: 32px !important;
        }
    }
    .tab-box-v1{
        border: 1px solid #38f;
        border-top: 0;
        margin: 0 10px;
        height: calc((100vh - 260px) / 2 );
        // .triangle {
        //     -webkit-mask-image: url(''),
		// 		url(''),
		// 		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect rx='8' width='100%' height='100%' fill='%23F8EAE7'/></svg>");
		// 	-webkit-mask-size: 18px 30px, 20px 30px, calc(100% - 30px) calc(100% + 17px);
		// 	-webkit-mask-position: right bottom, left bottom, center top;
		// 	-webkit-mask-repeat: no-repeat;
        // }
    }

    .tabs-card-edit-box2{
        .ant-tabs-tab{
            // margin-right: 5px !important;
            border-bottom-left-radius: 10px !important;
            border-bottom-right-radius: 10px !important;
        }
    }
    .tabs-card-edit-box3{
        .ant-tabs-tab-active{
            background-color: #fff !important;
            color: #38f !important;
        }
    }
    .tabs-card-edit-box4{
        .ant-tabs-tab{
            // margin-right: 5px !important;
            border-top-left-radius: 10px !important;
            border-top-right-radius: 10px !important;
        }
        .ant-tabs-tab-active{
            background-color: #fff !important;
            color: #38f !important;
        }
    }
}
</style>